// 地图
var baseFontSize
$(function() {
	baseFontSize = document.documentElement.style.fontSize.split("px")[0];
	$(window).resize(function() {
		baseFontSize = document.documentElement.style.fontSize.split("px")[0];
		console.log(baseFontSize) //当浏览器大小变化时
		left_map.resize();
		right_bar.resize();
	});

	var left_map = echarts.init(document.getElementById('map-echart'));
	// 地图公务员数据
	var mapPeople = {
		mapPeopleData: [{
				"name": "北京",
				"value": "3.67"
			}, {
				"name": "天津",
				"value": "2.62"
			},
			{
				"name": "河北",
				"value": "9.65"
			}, {
				"name": "山西",
				"value": "8.72"
			},
			{
				"name": "内蒙古",
				"value": "7"
			}, {
				"name": "辽宁",
				"value": "10.26"
			
			},
			{
				"name": "吉林",
				"value": "5.50"
			}, {
				"name": "黑龙江",
				"value": "6.55"
			}, {
				"name": "上海",
				"value": "1.31"
			}, {
				"name": "黑龙江",
				"value": "6.55"
			}, {
				"name": "江苏",
				"value": "9.90"
			}, {
				"name": "浙江",
				"value": "7.45"
			}, {
				"name": "安徽",
				"value": "5.98"
			}, {
				"name": "福建",
				"value": "3.92"
			}, {
				"name": "江西",
				"value": "5.93"
			}, {
				"name": "山东",
				"value": "10.8"
			}, {
				"name": "河南",
				"value": "9.72"
			}, {
				"name": "湖北",
				"value": "9.69"
			}, {
				"name": "湖南",
				"value": "9.18"
			}, {
				"name": "广东",
				"value": "9.38"
			}, {
				"name": "广西",
				"value": "6.17"
			}, {
				"name": "海南",
				"value": "1.39"
			}, {
				"name": "重庆",
				"value": "2.62"
			}, {
				"name": "四川",
				"value": "9.95"
			}, {
				"name": "贵州",
				"value": "3.96"
			}, {
				"name": "云南",
				"value": "6.25"
			}, {
				"name": "西藏",
				"value": "0.9"
			}, {
				"name": "陕西",
				"value": "7.15"
			}, {
				"name": "甘肃",
				"value": "7.18"
			}, {
				"name": "青海",
				"value": "1.39"
			}, {
				"name": "宁夏",
				"value": "1.46"
			}, {
				"name": "新疆",
				"value": "5.25"
			}, {
				"name": "台湾",
				"value": "0"
			}, {
				"name": "南海诸岛",
				"value": "0"
			}

		],
		peoplePeices: [{
				gt: 10,
				label: "大于10万",
				color: "#248fff",
			}, {
				gte: 5.1,
				lte: 10,
				label: "5万 - 10万",
				color: "#51a2f8"
			}, {
				gte: 1,
				lte: 5,
				label: "1万 - 5万",
				color: "#97c8fb"
			},
			{
				lt: 1,
				label: "小于1万",
				color: "#c6e3fe"
			},
		],

		peopleVisueText: ["", "公务员数量(万人) :"]
	}
	// 地图组织数量
	var mapOrganize = {
		mapOriganzeData: [{
				"name": "北京",
				"value": "4"
			}, {
				"name": "天津",
				"value": "1"
			},
			{
				"name": "河北",
				"value": "31"
			}, {
				"name": "山西",
				"value": "16"
			},
			{
				"name": "内蒙古",
				"value": "17"
			}, {
				"name": "辽宁",
				"value": "20"
			},
			{
				"name": "吉林",
				"value": "11"
			}, {
				"name": "黑龙江",
				"value": "15"
			}, {
				"name": "上海",
				"value": "1"
			}, {
				"name": "黑龙江",
				"value": "15"
			}, {
				"name": "江苏",
				"value": "19"
			}, {
				"name": "浙江",
				"value": "18"
			}, {
				"name": "安徽",
				"value": "22"
			}, {
				"name": "福建",
				"value": "13"
			}, {
				"name": "江西",
				"value": "13"
			}, {
				"name": "山东",
				"value": "20"
			}, {
				"name": "河南",
				"value": "34"
			}, {
				"name": "湖北",
				"value": "22"
			}, {
				"name": "湖南",
				"value": "15"
			}, {
				"name": "广东",
				"value": "21"
			}, {
				"name": "广西",
				"value": "15"
			}, {
				"name": "海南",
				"value": "1"
			}, {
				"name": "重庆",
				"value": "1"
			}, {
				"name": "四川",
				"value": "23"
			}, {
				"name": "贵州",
				"value": "10"
			}, {
				"name": "云南",
				"value": "17"
			}, {
				"name": "西藏",
				"value": "8"
			}, {
				"name": "陕西",
				"value": "12"
			}, {
				"name": "甘肃",
				"value": "23"
			}, {
				"name": "青海",
				"value": "11"
			}, {
				"name": "宁夏",
				"value": "6"
			}, {
				"name": "新疆",
				"value": "18"
			},
			{
				"name": "台湾",
				"value": "0"
			}, {
				"name": "南海诸岛",
				"value": "0"
			}
		],
		origanizePeices: [{
				gt: 25,
				label: "大于25",
				color: "#248fff",
			}, {
				gte: 16,
				lte: 25,
				label: "16 - 25",
				color: "#51a2f8"
			}, {
				gte: 5,
				lte: 15,
				label: "5 - 15",
				color: "#97c8fb"
			},
			{
				lt: 5,
				label: "小于5",
				color: "#c6e3fe"
			}
		],

		origanizeVisueText: ["", "机构数量(个) :"]

	}
	left_map.setOption(mapDataOption(mapPeople.mapPeopleData, mapPeople.peoplePeices, mapPeople.peopleVisueText,
		"公务员数量(万人)", "全国公务员分布情况"), true);

	// 右边柱形图
	var right_bar = echarts.init(document.getElementById('echarts-bar'));
	// 柱状公务员数据
	var mapPeopleBarData = mapPeople.mapPeopleData.sort(function(a, b) {
		return b.value - a.value
	}).slice(0, 10);
	// 柱状组织数据
	var originazeBarData = mapOrganize.mapOriganzeData.sort(function(a, b) {
		return b.value - a.value
	}).slice(0, 10);
	right_bar.setOption(barOption(mapPeopleBarData, "公务员数量(万人)", {
		 
		name: "数量(万人)"
	}), true);

	$('.no-select').click(function() {
		$(this).addClass("select-tab").siblings().removeClass("select-tab");
		if ($(this).index() == 0) {
			left_map.setOption(mapDataOption(mapPeople.mapPeopleData, mapPeople.peoplePeices, mapPeople.peopleVisueText,
					"公务员数量(万人)", "全国公务员分布情况"),
				true);
			right_bar.setOption(barOption(mapPeopleBarData, "公务员数量(万人)", {
			 
				name: "数量(万人)"
			}), true);
			$(".left-contentTitle").fadeOut();
			$(".left-contentTitle").fadeIn();
			$(".left-contentTitle").text("全国公务员分布  Top10")

		} else {
			left_map.setOption(mapDataOption(mapOrganize.mapOriganzeData, mapOrganize.origanizePeices, mapOrganize.origanizeVisueText,
					"机构数量(个)", "全国机构分布情况"),
				true);
			right_bar.setOption(barOption(originazeBarData, "机构数量(个)", {
				 
				name: "数量(个)"
			}), true);
			$(".left-contentTitle").fadeOut();
			$(".left-contentTitle").fadeIn();
			$(".left-contentTitle").text("全国机构分布  Top10")
		}
	})
})
// 柱状图配置
function barOption(data, name, xAisaLabel) {
	var yData = [],
		barData = []
	data.forEach(function(item) {
		yData.push(item.name)
		barData.push({
			value: item.value,
			scoper: item.scoper
		})
	})
	yData.reverse();
	barData.reverse();
	return {
		tooltip: {
			extraCssText: 'background:rgba(255,255,255,0.8); color:#000; border: 1px solid #6cc9ff;border-radius: 10px;',
			show: true, //鼠标移入是否触发数据
			trigger: 'item', //出发方式
			formatter: '{a}:<br /> {b} {c}  '

		},
		grid: {
			left: "-5%",
			right: '20%',
			top: "2%",
			bottom: "3%",
			containLabel: true
		},
		xAxis: {
			type: 'value',
			show: true,
			name: xAisaLabel.name,
			nameGap: 5,
			nameTextStyle: {
				fontSize: 11
			},
			axisLabel: {
				show: true,
				margin:10,
			 
				fontSize: baseFontSize / 1.45,
				align: "center",
				color: "#000"
			},
			axisLine: {

				symbolSize: [8, 12],

				symbol: ['none', 'arrow']
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dashed'
				} //设置背景为虚线 
			}
		},
		yAxis: {
			type: 'category',
			data: yData,
			axisTick: {
				show: false
			},
			// max:10,
			axisLabel: {
				show: true,
				margin: 20,
				fontSize: baseFontSize / 1.45,
				align: "center",
				color: "#000"
			},
			axisLine: {
				show: true,
				lineStyle: {

				}
			},
			splitLine: {
				show: false
			},
		},
		series: [{
			name: name,
			type: 'bar',
			barWidth: "60%",
			// barCategoryGap: "100%",
			label: {
				normal: {
					show: true,
					position: 'insideRight',
					color: "#fff",
					fontSize: baseFontSize / 1.65,
					formatter: '{c}  '
				}
			},
			itemStyle: {
				// barBorderRadius: [5, 5, 5, 5],
				color: "#248fff",

				shadowColor: 'rgba(36, 143, 225, 0.9)',
				shadowBlur: 1

			},
			data: barData

		}]
	}

}
// 地图配置
function mapDataOption(data, visueMapPeices, visueText, name, titleText) {
	return mapOption = {
		title: {
			text: titleText,
			left: "33%",
			top: "5%",
			textStyle: {
				fontSize: baseFontSize / 1
			}
		},
		tooltip: {
			extraCssText: 'background:rgba(255,255,255,0.8); color:#000; border: 1px solid #6cc9ff;border-radius: 10px;',
			show: true, //鼠标移入是否触发数据
			trigger: 'item', //出发方式
			// textStyle:{color:#000,fontSize:12},
			// formatter: function(params) {
			// 	console.log(params)
			// 	return '<h1 class="mapToolip-title">公务员数量<span>详情</span></h1>' +
			// 	'<div class="mapToolip-content">'+
			// 	'<div class="content-item">'+params.data.name+'<span>'+params.data.value+' 个</span></div>'+

			// 	'</div>'
			// }
			formatter: '{a}:<br /> {b} {c}  '
		},
		//地图图裂
		visualMap: {
			type: "piecewise",
			min: 100,
			left: "3%",
			bottom: "2%",
			itemGap: baseFontSize / 2,
			showLabel: !0,
			align: "left",
			//orient: 'horizontal', //图例水平放置
			itemWidth: baseFontSize / 0.96,
			inverse: true,
			itemHeight: baseFontSize / 1.536,

			textStyle: {
				color: "#000",

				fontSize: baseFontSize / 1.57,


			},
			orient: "vertical",
			text: visueText,
			pieces: visueMapPeices,
			show: !0,

		},
		geo: {
			map: 'china',
			left: "15%",
			right: "10%",
			top: "10%",
			bottom: "8%",
			zoom: 1.1,
			// aspectScale: 0.9, //长宽比
			label: {
				show: true,
				fontSize: baseFontSize / 1.5,
				color: "#333"
			},
			roam: false,
			itemStyle: {
				normal: {
					borderColor: "#72d4f6",
					borderWidth: 3,
					shadowColor: "#b4d9ec",
					shadowBlur: 10,
					areaColor: '#272235',
					fontWeightL: 700,
					/*  shadowBlur:20,
					  shadowColor: '#fff',*/
				}
			}
		},
		series: [{
				name: name,
				show: true,
				type: 'map',
				mapType: 'china',
				// getIndx: 0,
				data: data,
				left: "15%",
				right: "10%",
				top: "10%",
				bottom: "8%",
				// aspectScale: 0.9,
				selectedMode: 'single', //当点击相应的地图的区域，是否多选或单选
				roam: false,
				zoom: 1.1,
				label: {
					show: true,
					fontSize: baseFontSize / 1.5,
					color: "#333"
				},
				itemStyle: {
					normal: {
						borderColor: '#8fb1d0',
						borderWidth: 1,
					}
				},

				animation: true

			},

		]
	};
}
